
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="/resource/UserPwoer.tld" prefix="p"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	pageContext.setAttribute("fnId", request.getAttribute("fnId"));
	pageContext.setAttribute("userPwoer", request.getSession().getAttribute("userPwoer"));
%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<LINK rel="Bookmark" href="../images/favicon.ico">
<!-- 本框架基本脚本和样式 -->
<script type="text/javascript"
	src="${path }/resource/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript"
	src="${path }/resource/js/systools/MBase.js"></script>
<style>
table {
	text-align: center;
}

.innerTable {
	
}

.cell {
	width: 30px;
	height: 15px;
	border: 1px solid #e0e0e2;
}

.outTable {
	margin-bottom: 200px;
}

.firstTd {
	border: 1px solid #e0e0e2;
	border-right: none;
	text-align: left;
}

.red {
	background: #994444;
	border-right: none;
	border-left: none;
}

.adbox {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 350px;
	height: 150px;
	padding: 10px;
	box-shadow: 8px 5px 5px #dedddd;
	background: rgba(33, 33, 33, 0.8);
	color: #fff;
	border-radius: 5px;
}
</style>
</head>
<body class="gray-bg">
	<nav class="huiNav">
		<i class="fa fa-home"></i> 首页 <span>&gt;</span>任务中心<span>&gt;</span>任务甘特图
		<a class="btn btn-info  btn-sm pull-right"
			href="javascript:location.replace(location.href);" title="刷新"><i
			class="fa fa-refresh"></i></a>
	</nav>

	<div class="ibox-content" id="app">
		<div class="row">
			<form class="form-inline input-list">
				<div class="col-sm-4 col-md-3 col-xs-6 mt-20 ">
					<label for="exampleInputName2">请选择年份</label>
					<div class="form-group ml-20">
						<select class="form-control" v-model="year" @change="loadData()">
							<template v-for="item in 3">
							<option v-if="item==1" selected="selected"
								:value="currentYear-item+1">{{currentYear-item+1}}</option>
							<option v-else :value="currentYear-item+1">{{currentYear-item+1}}</option>
							</template>
						</select>
					</div>
				</div>
				<div class="col-sm-4 col-md-3 col-xs-6 mt-20 ">
					<label for="exampleInputName2">请选择月份</label>
					<div class="form-group ml-20">
						<select class="form-control" v-model="month" @change="loadData()">
							<template v-for="item in 12">
							<option v-if="item==1" selected="selected" :value="item">{{item}}</option>
							<option v-else :value="item">{{item}}</option>
							</template>
						</select>
					</div>
				</div>
			</form>
		</div>
		<br>
		<div class="row">
			<table class="outTable">
				<thead>
					<tr>
						<td class="firstTd">姓名/时间</td>
						<td class="cell" v-for="(item, index) in times">{{index+1}}</td>
					</tr>
				</thead>
				<tbody>
					<template v-for="item in users"> <!-- 构建用户信息和用户的第一排任务信息 -->
					<tr>

						<td class="firstTd">{{item.name}}（{{item.tasks.length}}）</td>
						<td :colspan="times" v-if="item.tasks.length>0">
							<table class="innerTable">
								<tr v-for="ts in item.tasks">

									<template v-for="(item, index) in times">


									<td
										v-if="(ts.beginIndex<=(index+1) && ts.endIndex>=(index+1)) || ( ts.beginIndex<=(index+1) &&  ts.endMonth!=month)"
										@mouseenter="showMsg(ts.id)" @mouseleave="hideMsg()"
										:class="'cell '+setCss(ts.status)">{{index+1}}</td>

									<td v-else class="cell">{{index+1}}</td>

									</template>

								</tr>
							</table>
						</td>
						<td v-else :colspan="times">
							<table class="innerTable">
								<tr>
									<td v-for="(item, index) in times" class="cell">{{index+1}}</td>
								</tr>
							</table>
						</td>


					</tr>
					</template>


				</tbody>
			</table>
			<div id="ad" class="adbox" style="display: none">
				<ul>
					<li><h4>{{currentMsg.name}}</h4></li>
					<li>创建人：{{currentMsg.createName}}</li>
					<li>任务等级：{{currentMsg.level}}</li>
					<li>任务状态：{{currentMsg.status}}</li>
				</ul>
			</div>
		</div>
	</div>
	<jsp:useBean id="now" class="java.util.Date">
	</jsp:useBean>

	<script src="https://unpkg.com/vue/dist/vue.js"></script>

	<script type="text/javascript">
		var app = new Vue({
			el : '#app',
			data : {
				users : [],
				times : 0,
				currentMsg : {},
				year : ${now.year+1900 },
				currentYear : ${now.year+1900 },
				month : ${now.month+1 },
			},
			methods : {
				showMsg : function(id) {
					var msg = msg
					$.AjaxProxy({
						c : false,
						a : false,
						p : {
							id : id
						}
					}).invoke("${path}/admin/task/showList", function(loj) {
						app.currentMsg = loj.getValue("rows")[0];
					});
					var adNode = $("#ad");
					adNode.css("left", event.pageX + 10 + "px");
					adNode.css("top", event.pageY - 70 + "px");
					adNode.show();
				},
				hideMsg : function() {
					$("#ad").hide();
				},
				setCss:function(stauts){
					var css="btn-info";
					if (stauts=="未开始"){
						css= "btn-info";
					}else if (stauts=='已开始'){
						css= "btn-primary";
					}
					else if (stauts=='已取消'){
						css= "btn-warning";
					}
					else if (stauts=='已完成'){
						css= "btn-success";
					}
					else if (stauts=='已评价'){
						css= "btn-success";
					}
					return css;
				},
				loadData : function() {
					$.AjaxProxy({
						p : {
							year : app.year,
							month : app.month
						}
					}).invoke("${path}/admin/task/findUserTaskForChart",
							function(loj) {
								app.times = loj.getValue("mapInfo").maxDays;
								app.users = loj.getValue("rows");
							});
				}
			},
			computed: {
				  classObject: function (type) {
				    return {
				    	'btn-primary':true,
				      
				    }
				  }
				}
			

		})
		app.loadData();
	</script>
</body>
</html>
